<template>
  <div class="apps" id="box">
    <ul id="uId">
      <li v-for="item in extendData" :key="item.id" :style="{
        height: item.height ? item.height : '100px',
        lineHeight: item.height ? item.height : '100px',
      }" @click="handlersetApp(item.code)">
        {{ item.name }}
        <ul v-if="item.child && item.child.length > 0">
          <li v-for="item in item.child" :key="item.id" :style="{
            height: item.height ? item.height : '100px',
            lineHeight: item.height ? item.height : '100px',
          }">{{ item.title }}</li>
        </ul>
      </li>
    </ul>
  </div>
  <div>
    <a-tree-select v-model:value="value" show-search style="width: 100%"
      :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" placeholder="Please select" allow-clear
      tree-default-expand-all :tree-data="treeData">
      <template #title="{ value: val, title }">
        <b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
        <template v-else>{{ title }}</template>
      </template>
    </a-tree-select>
  </div>
</template>
<script >
// import { TreeSelectProps } from 'ant-design-vue';
import { defineComponent, reactive, nextTick, watch, ref } from 'vue'

export default defineComponent({
  components: {

  },
  props: {

  },
  emits: [],
  setup() {
    const visidialog = reactive({
      ad_position: false, //广告位
      banner: false,
      activity_notice: false,
      daily_benefits: false,
      good_recommend: false,
      first_picture: false,
      explosive_recommend: false,
    })
    const handlersetApp = (visi) => {
      visidialog[visi] = true
    }
    // const { proxy } = getCurrentInstance()
    // const appModelId = ref(null)
    nextTick(() => {
      // console.log(document.querySelector('#box'))
      document.querySelector('#box').scrollTo({
        top: document.querySelector('#box').scrollHeight,
        behavior: 'smooth',
      })
    })
    const extendData = reactive([
      {
        id: 'pindao',
        name: '频道页组件',
        child: [
          {
            id: 0,
            name: '运营位',
            title: 'banner',
            height: '160px',
            code: 'banner',
          },
          {
            id: 1,
            name: '活动预告',
            title: '活动预告',
            height: '70px',
            code: 'activity_notice',
          },
          {
            id: 2,
            name: '活动专区',
            title: '活动专区',
            height: '300px',
            code: 'activity_zone',
          },
          {
            id: 3,
            name: '每日钜惠',
            title: '每日钜惠',
            height: '100px',
            code: 'daily_benefits',
          },
          {
            id: 4,
            name: '好物推荐',
            title: '好物推荐',
            height: '100px',
            code: 'good_recommend',
          },
          {
            id: 5,
            name: '精品集结',
            title: '精品集结',
            height: '150px',
            code: 'boutique_collection',
          },
        ],
      },
    ])
    const value = ref();
    let list = [
      {
        title: 'parent 1',
        value: 'parent 1',
        children: [
          {
            title: 'parent 1-0',
            value: 'parent 1-0',
            children: [
              {
                title: 'my leaf',
                value: 'leaf1',
              },
              {
                title: 'your leaf',
                value: 'leaf2',
              },
            ],
          },
          {
            title: 'parent 1-1',
            value: 'parent 1-1',
          },
        ],
      },
    ]
    function setSelectable(arr) {
      arr.map(item => {
        if (item.children && item.children.length > 0) {
          item.selectable = false;
          setSelectable(item.children)
        }
      })
    }
    setSelectable(list);
    const treeData = ref(list);
    console.log(treeData,list)
    watch(value, () => {
      console.log(value.value);
    });
    return {
      visidialog,
      handlersetApp,
      extendData,
      value,
      treeData
    }
  },
})
</script>
<style scoped lang="less">
.apps {
  width: 300px;
  height: calc(40vh - 80px);
  border: 1px solid #d6d6d6;
  padding: 10px;
  overflow: auto;
  border-radius: 20px;
  box-sizing: border-box;
  position: relative;

  .apps-top {
    width: 272px;
    height: 46px;
    background: #d6d6d6;
    position: absolute;
    border-radius: 4px;
  }

  ul {
    li {
      width: 100%;
      // height: 100px;
      text-align: center;
      // line-height: 100px;
      border: 1px dashed #d6d6d6;
      margin: 5px 0;
      cursor: pointer;
      border-radius: 4px;
    }
  }
}
</style>
